﻿@model ViewModels.Contact.ShowModel
@{
    object id = ViewContext.HttpContext.Request.Query["id"];
}
@if (Model != null)
{
    <table zyf-contact-items class="table top-border-0">
        @if (!string.IsNullOrEmpty(Model.Wechat))
        {
                <tr>
                    <td><i class="fa fa-wechat"></i> 微信</td>
                    <td>@Model.Wechat</td>
                    <td>
                        <small style="visibility:hidden;" zyf-report-contact-issue data-item="微信有误" class="text-warning hover-hand">
                            <span class="fa fa-warning"></span> 联系不上
                        </small>
                    </td>
                </tr>
        }
        @if (!string.IsNullOrEmpty(Model.QQ))
        {
                <tr>
                    <td><i class="fa fa-qq"></i> QQ</td>
                    <td><a href="tencent://message/?uin=@Model.QQ" target="_blank">@Model.QQ</a></td>
                    <td>
                        <small style="visibility:visible;" zyf-report-contact-issue data-item="QQ有误" class="text-warning hover-hand">
                            <span class="fa fa-warning"></span> 联系不上
                        </small>
                    </td>
                </tr>
        }
        @if (!string.IsNullOrEmpty(Model.Email))
        {
                <tr>
                    <td><i class="fa fa-envelope"></i> Email</td>
                    <td><a href="mailto:@Model.Email">@Model.Email</a></td>
                    <td>
                        <small style="visibility:hidden;" zyf-report-contact-issue data-item="Email有误" class="text-warning hover-hand">
                            <span class="fa fa-warning"></span> 联系不上
                        </small>
                    </td>
                </tr>
        }
        @if (!string.IsNullOrEmpty(Model.Other))
        {
                <tr>
                    <td>其他说明：</td>
                    <td>@Model.Other</td>
                    <td>
                        <small style="visibility:hidden;" zyf-report-contact-issue data-item="其他说明有误" class="text-warning hover-hand">
                            <span class="fa fa-warning"></span> 联系不上
                        </small>
                    </td>
                </tr>
        }
    </table>
    <div class="form-group">
        <div zyf-contact-issue-detail style="display:none;" class="input-group p-1">
            <input type="text" zyf-in-input class="form-control border-warning" />
            <div class="input-group-append">
                <button zyf-in-btn class="btn btn-sm btn-outline-warning">提交</button>
            </div>
        </div>
        <span zyf-in-result style="display:none;" class="text-success p-1">* 反馈已提交，我们会尽快处理，^_^ </span>
    </div>
}

<script>
    $(function () {
        $('[zyf-contact-items]').find('tr').mouseover(function () {
            $(this).find('[zyf-report-contact-issue]').css("visibility", "visible");
        }).mouseout(function () {
            $(this).find('[zyf-report-contact-issue]').css("visibility", "hidden");
        })
        $('[zyf-report-contact-issue]').click(function () {
            let $container = $('[zyf-contact-issue-detail]'),
                $input = $container.find('[zyf-in-input]');
            $container.show();
            $input.val($(this).data('item'));
            $container.find('[zyf-in-btn]').click(function () {
                let $this = $(this);
                $.ajax({
                    url: '/User/_ReportIssue',
                    method: 'post',
                    data: {

                        contactId: '@id',
                        comment: $input.val()
                    },
                    beforeSend: function () {
                        $this.attr('disabled', true);
                    },
                    success: function () {
                        $input.val('');
                        $('[zyf-in-result]').show();
                    },
                    complete: function () {
                        $this.attr('disabled', false);
                    }
                })
            })
        })
    })
</script>